<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>动漫风格注册页面</title>
    <style>
        body {
            font-family: 'Comic Sans MS', sans-serif; /* 使用有趣的字体 */
            background: url('images/anime-background.jpg') no-repeat center center fixed; /* 动漫背景图 */
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            color: white; /* 文本颜色 */
        }
        h2 {
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影 */
        }
        form {
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
            background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 盒子阴影 */
        }
        label, input {
            display: block;
            margin-bottom: 10px;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.5); /* 输入框背景 */
            color: black; /* 输入框文本颜色 */
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background: linear-gradient(to right, red, orange); /* 渐变背景 */
            color: white; /* 按钮文本颜色 */
            cursor: pointer; /* 鼠标样式 */
            transition: transform 0.2s; /* 动画效果 */
        }
        input[type="submit"]:hover {
            transform: scale(1.1); /* 鼠标悬停时放大 */
        }
        #passwordCheckResult {
            text-align: center;
            margin-bottom: 10px;
        }
        .password-match {
            color: limegreen; /* 密码匹配时的颜色 */
        }
        .password-mismatch {
            color: red; /* 密码不匹配时的颜色 */
        }
    </style>
    <script type="text/javascript">
        function checkPassword() {
            var password = document.getElementById("password").value;
            var confirmPassword = document.getElementById("confirmPassword").value;
            var checkResult = document.getElementById("passwordCheckResult");

            if (password === confirmPassword) {
                checkResult.textContent = "密码匹配！";
                checkResult.className = "password-match";
            } else {
                checkResult.textContent = "密码不匹配！";
                checkResult.className = "password-mismatch";
            }
        }
    </script>
</head>
<body>
    <h2>欢迎来到动漫世界，请注册！</h2>
    <form action="register" method="post">
        <div>
            <label for="username">动漫角色名：</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label for="password">秘密咒语：</label>
            <input type="password" id="password" name="password" required oninput="checkPassword();">
        </div>
        <div>
            <label for="confirmPassword">确认秘密咒语：</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required oninput="checkPassword();">
        </div>
        <div id="passwordCheckResult"></div> <!-- 显示校验结果 -->
        <div>
            <input type="submit" value="踏入动漫世界！">
        </div>
    </form>
</body>
</html>